
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>

    <title>Stacking Context Examples: z-index values</title>
	
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
		function updateZIndex(z) {
			var s = (z ==="" ? "(not specified)" : z);
			$('#div3').css('zIndex', z).find('span').text(s);
		}
	</script>
	
	<link rel="stylesheet" type="text/css" href="example.css" />
    <style type="text/css">
     
    </style>

  </head>
  <body>

    <div id="div1">
      <h1>Division Element #1</h1>
      <code>position: relative;<br/>
      z-index: 2;</code>
    </div>

    <div id="div2">
      <h1>Division Element #2</h1>
      <code>position: relative;<br/>
      z-index: 5;</code>
    </div>

    <div id="div3">

      <div id="div4">
        <h1>Division Element #4</h1>
        <code>position: relative;<br/>
        z-index: 3;</code>
      </div>

      <h1>Division Element #3</h1>
      <code>position: absolute;<br/>
      z-index: <span>(not specified)</span>;</code>

      <div id="div5">
        <h1>Division Element #5</h1>
        <code>position: relative;<br/>
        z-index: 4;</code>
      </div>
   
      <div id="div6">
        <h1>Division Element #6</h1>
        <code>position: absolute;<br/>
        z-index: 6;</code>
      </div>

    </div>

	
	<div id="description">
		Positioning and assigning a z-index value to an HTML element creates a stacking context.<br/>
		Use the following links to see what happens when the z-index of #div3 is changed.<br/><br/>
		
		No stacking context, the children of #div3 are stacked in parent context:
		<ul>
			<li><a href="javascript:updateZIndex('')">reset to no z-index specified</a></li>
			<li><a href="javascript:updateZIndex('auto')">z-index: auto</a></li>
		</ul>
		<br/>
		
		Creates lower stacking context, send behind the green:
		<ul>
		<li><a href="javascript:updateZIndex('-1')">z-index: -1</a> </li>
			<li><a href="javascript:updateZIndex('0')">z-index: 0</a></li>			
			<li><a href="javascript:updateZIndex('1')">z-index: 1</a> </li>
		</ul>
		<br/>
		
		Creates higher stacking context, send above the green:
		<ul>
			<li><a href="javascript:updateZIndex('9')">z-index: 9</a></li>			
		</ul>		
		<br/>
		
		<h1>IE6 / IE7:</h1>
		Merely having positioning creates a stacking context, 
		so the children of #div3 are always stacked inside the #div3 context.<br/>		
	</div>
	
	<script src="../dist/zviz.dist.js" type="text/javascript"></script>
  </body>
</html>
